<script lang="ts" setup>
import { ref } from "vue";
import { CalendarOptions } from "@fullcalendar/core";
import FullCalendar from "@fullcalendar/vue3"; // 核心库
import InteractionPlugin from "@fullcalendar/interaction"; // 交互库
import MomentPlugin from "@fullcalendar/moment"; // 格式化时间库。可以在插件使用YYYY MM
import DaygridPlugin from "@fullcalendar/daygrid"; // 月视图
import { ElMessage } from "element-plus";

defineProps({
  msg: String,
});

const selected = ref();
const startTime = ref();
const endTime = ref();
const dialogVisible = ref(false);
const matchList = ref<any>([]); //日历数据
const constantsList = [
  {
    title: "开始时间：10:00；结束时间：11:00",
    start: "2024-04-03",
    end: "2024-04-04",
    startTimeDate: "10:00",
    endTimeDate: "11:00",
  },
  {
    title: "开始时间：10:00；结束时间：11:00",
    start: "2024-04-02",
    end: "2024-04-05",
    startTimeDate: "10:00",
    endTimeDate: "11:00",
  },
];

const calendarOptions = ref<CalendarOptions>({
  locale: ["zh"],
  plugins: [InteractionPlugin, MomentPlugin, DaygridPlugin],
  initialView: "dayGridMonth",
  editable: true,
  eventClassNames: "test",
  dayMaxEventRows: 3,
  events: matchList.value, //绑定展示事件
  selectable: true,
  select: (info) => {
    //鼠标滑动选择日程
    console.log(info);
    dialogVisible.value = true;
    selected.value = info;
  },
  eventClick: (...args) => {
    console.log(...args);
  },
});

const handleClose = (done: () => void) => {
  done();
};

/**
 * 保存日期信息
 */
const saveInfo = () => {
  if (!startTime.value || !endTime.value) {
    ElMessage({
      message: "请选择完整时间段",
      type: "warning",
    });
    return;
  }
  if (calendarOptions.value.events) {
    const title = `开始时间：${startTime.value}；结束时间：${endTime.value}`;
    matchList.value.push({
      title,
      start: selected.value.startStr,
      end: selected.value.endStr,
      startTimeDate: startTime.value,
      endTimeDate: endTime.value,
    });
  }
  dialogVisible.value = false;
  console.log(selected.value, startTime.value, endTime.value);
};
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  {{ matchList }}
  <FullCalendar :options="calendarOptions" />
  <el-dialog
    v-model="dialogVisible"
    title="选择时间"
    width="500"
    :before-close="handleClose"
  >
    <div class="timeSelectBox">
      <el-time-select
        v-model="startTime"
        style="width: 240px"
        start="08:00"
        step="00:30"
        end="21:30"
        :max-time="endTime"
        placeholder="开始时间"
      />
      <span class="text">到</span>
      <el-time-select
        v-model="endTime"
        style="width: 240px"
        :min-time="startTime"
        placeholder="结束时间"
        start="08:30"
        step="00:30"
        end="22:00"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
        <el-button type="primary" @click="saveInfo"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.timeSelectBox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.test {
  .fc-event-title {
    white-space: break-spaces;
  }
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
